<template>
  <div>
    <div
      class="el-date-editor el-range-editor el-input__inner el-date-editor--timerange"
      @mouseenter="getdeliveryNowTime"
      @mouseleave="selectTimeFlag = false"
      style="position: relative;height: 85%;margin-top: 2px;"
    >
      <i class="el-input__icon el-range__icon el-icon-time"></i>
      <input autocomplete="off" v-model="StartTime" readOnly="true" placeholder="开始时间" name="" class="el-range-input">
      <span class="el-range-separator">至</span>
      <input autocomplete="off" v-model="EndTime" readOnly="true" placeholder="结束时间" name="" class="el-range-input">
      <i class="el-input__icon el-range__close-icon"></i>
      <div v-if="selectTimeFlag && !disable" class="el-picker-panel time-select el-popper" style="width: 220px; position: absolute; top: 23px; left: 0px; z-index: 2025;" x-placement="bottom-start">
        <div class="el-scrollbar">
          <div class="el-picker-panel__content el-scrollbar__wrap el-scrollbar__wrap--hidden-default">
            <div class="el-scrollbar__view" style="display: flex;flex-wrap: wrap;">
              <div
                class="time-select-item"
                v-for="(item,index) in timelist"
                :key="index"
                @click="getTime(item)"
                style="width: 85px;margin-left: 5px;"
              >{{ item }}</div>
            </div>
          </div>
          <div class="el-scrollbar__bar is-horizontal">
            <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
          </div>
          <div class="el-scrollbar__bar is-vertical">
            <div class="el-scrollbar__thumb" style="height: 13.5501%; transform: translateY(0%);"></div>
          </div>
        </div>
        <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    disable: {
      required: false
    },
    deliveryTime: {
      required: true
    },
    OrderStartTime: {
      required: true
    },
    OrderEndTime: {
      required: true
    },
  },
  data() {
    return {
      selectTimeFlag: false, // 时间选择弹框标记
      timelist: [
        '08:00',
        '08:30',
        '09:00',
        '09:30',
        '10:00',
        '10:30',
        '11:00',
        '11:30',
        '12:00',
        '12:30',
        '13:00',
        '13:30',
        '14:00',
        '14:30',
        '15:00',
        '15:30',
        '16:00',
        '16:30',
        '17:00',
        '17:30',
        '18:00',
        '18:30',
        '19:00',
        '19:30',
        '20:00',
        '20:30',
        '21:00',
        '21:30',
        '22:00',
        '22:30',
        '23:00',
        '23:30',
      ],
      StartTime: '', // 开始时间
      EndTime: '', // 结束时间
      timeFlag: false, // 时间选项是否禁用
    }
  },
  created() {
    setTimeout(() => {
      if (this.OrderStartTime) {
        this.StartTime = this.OrderStartTime.slice(11,16);
      }
      if (this.OrderEndTime) {
        this.EndTime = this.OrderEndTime.slice(11,16);
      }
    },1900)
  },
  mounted() {
  },
  methods: {
    showtime() {
      this.timelist = [
        '08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30',
      ]
    },
    getTime(val) {
      if(this.deliveryTime) {
        this.StartTime = val;
        let endtime = Number(val.slice(0,2)) + 1;
        let endtimehalf = val.slice(2,5)
        this.EndTime = endtime < 10 ? '0' + endtime + endtimehalf : endtime + endtimehalf;
        this.selectTimeFlag = false;
        if(this.StartTime === '23:30' || this.StartTime === '23:00') {
          this.EndTime = '23:59';
        }
      } else {
        this.$message.warning("您还未选择日期，请先选择日期");
      }
    },
    getStartTime() {
      return this.StartTime ? this.StartTime + ':00' : ''
    },
    getEndTime() {
      if (this.EndTime) {
        if (this.EndTime == '23:59') {
          return '23:59:59'
        } else {
          return this.EndTime + ':00'
        }
      }
      return ''
    },
    setTime(start, end) {
      this.StartTime = start;
      this.EndTime = end;
    },
    getdeliveryNowTime() {
      this.showtime();
      if(this.timelist.length > 0) {
        this.selectTimeFlag = true;
      } else {
        this.selectTimeFlag = false;
      }
    }
  }
}
</script>

<style>
.time-select .el-picker-panel__content {
  max-height: 300px;
}
</style>
